import React, { useEffect, useState } from 'react'
import HouseItem from '../../components/houseItem'
import { NavBar } from 'antd-mobile'
import { getFavoritesHousesAPI } from '../../apis/profile'
import { useNavigate,Link } from 'react-router-dom'
import { baseURL } from '../../utils/request'

export default function Favorate() {
    const navigate = useNavigate()
    const [favoritesHousesList, setFavoritesHouses] = useState([])
    async function getFavoritesHouses() {
        const res = await getFavoritesHousesAPI()
        setFavoritesHouses(res.body)
    }
    useEffect(() => {
        getFavoritesHouses()
    })
    return (
        <div className='favorate'>
            <NavBar onBack={() => navigate('/me')} style={{ backgroundColor: '#eee' }}>房屋收藏</NavBar>
            {
                favoritesHousesList?.length > 0 ?
                    favoritesHousesList.map(item => (
                        <HouseItem
                            onClick={() => navigate(`/detail/${item.houseCode}`)}
                            key={item.houseCode}
                            src={baseURL + item.houseImg}
                            title={item.title}
                            desc={item.desc}
                            tags={item.tags}
                            price={item.price}
                        />)
                    )
                    :
                    <div className='rent__content'>
                        <img src={baseURL + '/img/not-found.png'} />
                        <div>
                            你还没有收藏，去
                            <Link to={'/list'}>收藏房源</Link>
                            吧～
                        </div>
                    </div>
            }
        </div>
    )
}
